<!-- 编辑菜单 -->
<template>
  <el-dialog
    title="创建菜单"
    :lock-scroll="true"
    :append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="isShowDialog"
    width="30%"
    :before-close="hanleDialogClose"
    center
  >
    <el-form
      ref="menuFrom"
      status-icon
      :model="menuFrom"
      label-width="80px"
      size="mini"
      class="menu-edit-form"
      :rules="rules"
    >
      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="menuFrom.type" disabled>
          <el-radio :key="item.code" v-for="item in types" :label="item.code">{{
            item.remark
          }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="父级菜单">
        <select-tree v-model="menuFrom.parentId" :options="parents" :props="defaultProps" />
      </el-form-item>
      <el-form-item label="菜单名称" v-if="renderRule.name" prop="name">
        <el-input v-model="menuFrom.name"></el-input>
      </el-form-item>
      <el-form-item label="菜单能力" v-if="renderRule.ability" prop="ability">
        <el-select
          v-model="menuFrom.ability"
          size="mini"
          clearable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in abilities"
            :key="item.code"
            :label="item.remark"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务地址" v-if="renderRule.serverUri">
        <el-select
          v-model="menuFrom.serverUri"
          default-first-option
          filterable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in apis"
            :key="item.index"
            :label="item.remark"
            :value="item.url"
          >
            <span style="float: left">{{ item.url }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.remark + '(' + item.method + ')'
            }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图标" v-if="renderRule.icon">
        <icon-list @selected="handleSelectIcon" :data="menuFrom.menuMeta.icon" />
      </el-form-item>
      <el-form-item label="路由地址" v-if="renderRule.clientUri" prop="clientUri">
        <el-input v-model="menuFrom.clientUri"></el-input>
      </el-form-item>
      <el-form-item label="组件路径" v-if="renderRule.clientPath" prop="clientPath">
        <el-input v-model="menuFrom.clientPath"></el-input>
      </el-form-item>
      <el-form-item label="授权标识" v-if="renderRule.auth" prop="auth">
        <el-input v-model="menuFrom.auth"></el-input>
      </el-form-item>
      <el-form-item label="是否启用" v-if="renderRule.enable">
        <el-switch
          v-model="menuFrom.enable"
          :active-value="1"
          :inactive-value="0"
          active-text="启用"
          inactive-text="禁用"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="访问能力" v-if="renderRule.access">
        <el-switch
          v-model="menuFrom.access"
          :active-value="1"
          :inactive-value="0"
          active-color="#67C23A"
          inactive-color="#F56C6C"
          active-text="开放"
          inactive-text="鉴权"
        ></el-switch>
      </el-form-item>
      <el-form-item label="排序值" v-if="renderRule.sort">
        <el-input-number size="mini" v-model="menuFrom.sort" :max="99" :min="0" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmitForm()">确定</el-button>
        <el-button @click="hanleDialogClose()">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import SelectTree from '@/components/selectTree/index.vue'
import IconList from '@/components/iconList/index.vue'
export default {
  props: {
    data: {
      type: Object
    },
    types: {
      type: Array
    },
    abilities: {
      type: Array
    },
    apis: {
      type: Array
    },
    renderRule: {
      type: Object
    },
    perms: {
      type: Array
    },
    parents: {
      type: Array
    }
  },
  watch: {},
  components: {
    SelectTree,
    IconList
  },
  name: '',
  data() {
    return {
      isShowDialog: true,
      menuFrom: {},
      defaultProps: {
        parent: 'parentId', // 父级唯一标识
        value: 'id', // 唯一标识
        label: 'name', // 标签显示
        children: 'children' // 子级
      },
      rules: {
        name: [{ required: true, message: '请选择菜单名称', trigger: 'blur' }],
        ability: [{ required: true, message: '请选择菜单能力', trigger: 'change' }],
        auth: [{ required: true, message: '请输入授权标识', trigger: 'blur' }],
        clientUri: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
        clientPath: [{ required: true, message: '请输入组件路径', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.menuFrom = this.data
    console.log(this.menuFrom)
  },
  mounted() {},
  methods: {
    /**
     * 执行修改
     */
    handleSubmitForm() {
      this.$emit('submit', this.menuFrom)
    },
    /**
     * 关闭对话框
     */
    hanleDialogClose() {
      this.menuFrom = {}
      this.$emit('close')
    },
    /**
     * 选择icon
     */
    handleSelectIcon(val) {
      this.menuFrom.menuMeta.icon = val
    }
  }
}
</script>
<style>
/* @import url(); 引入css类 */
.menu-edit-form {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.el-dialog__wrapper {
  top: -60px;
  z-index: 2009;
}
</style>
